<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="邀请好友"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <div class="Friendsbox" style="width:100%;height:100%;">
        <!-- 通知栏,本页面功能正在完善中,暂未能邀请好友,敬请期待 -->
        <van-notice-bar mode="closeable" left-icon="volume-o">
          通知:本页面功能正在完善中,暂未能邀请好友,敬请期待
        </van-notice-bar>
        <!-- 背景图片 -->
        <img src="../../lib/img/../img/my_InviteFriends/图层 4@2x.png" alt="" width="100%" height="100%">
        <!-- 显示框 -->
        <div class="coverage">
          <!-- 按钮 -->
          <button @click="ejectFn">立即邀请</button>
          <!-- 分享弹出层 -->
          <van-share-sheet v-model="showShare" :options="options" @select="onSelect"/>
          <!-- 标签栏 -->
          <van-tabs v-model="active" line-height="0">
            <!-- 分析控制台可以发现,当被选中的时候会动态添加一条van-tab--active的cssName，我们可以根据这个classname来添加被选中的样式 -->
            <van-tab :title=succnum>
              <div v-for="(item, index) in succList" :key="index" class="SFdiv">
                <img :src=item.img alt="">
                <span>{{ item.name }}</span>
              </div>
            </van-tab>
            <van-tab :title=failnum>
              <div v-for="(item, index) in failList" :key="index" class="SFdiv">
                <img :src=item.img alt="">
                <span>{{ item.name }}</span>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Tab, Tabs, NoticeBar, ShareSheet, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(NoticeBar)
Vue.use(ShareSheet)
export default {
  // 设置data初始值
  data () {
    return {
      // 弹出层
      showShare: false,
      // 分享面板中得内容
      options: [
        {
          name: '微信',
          icon: require('./../../lib/img/my_InviteFriends/weixin@2x.png')
        },
        {
          name: 'QQ',
          icon: require('../../lib/img/my_InviteFriends/qq@2x.png')
        }
      ],
      // 记载完也买你tab组件默认显示的内容，通过下标匹配
      active: '0',
      // 成功邀请好友 [{},{}]
      succList: [
        {
          img: 'https://s1.ax1x.com/2020/05/07/YVwAdx.png',
          name: '小猪乔治'
        },
        {
          img: 'https://s1.ax1x.com/2020/05/07/YVwPy9.png',
          name: '小猪佩奇'
        },
        {
          img: 'https://s1.ax1x.com/2020/05/07/YVwPy9.png',
          name: '小猪佩奇'
        },
        {
          img: 'https://s1.ax1x.com/2020/05/07/YVwPy9.png',
          name: '小猪佩奇'
        }
      ],
      // 成功好友数
      succnum: '',
      // 未成功邀请好友 [{},{}]
      failList: [
        {
          img: 'https://s1.ax1x.com/2020/05/07/YVgTAJ.png',
          name: '猪爸爸'
        },
        {
          img: 'https://s1.ax1x.com/2020/05/07/YVg7N9.png',
          name: '猪妈妈'
        }
      ],
      // 失败好友数
      failnum: ''
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    this.succnum = `已成功邀请(${this.succList.length})`
    this.failnum = `未成功邀请(${this.failList.length})`
  },
  // 计算属性
  methods: {
    // 点击分享弹出面板
    ejectFn () {
      this.showShare = true
    },
    // 点击分享面板中得图标
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  @import "@/lib/reset.scss";
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    .Friendsbox {
      position: relative;
      // 通知
      /deep/ .van-notice-bar {
        position: absolute;
        top: 0;
        width: 100%;
        height: .35rem;
        font-size: .16rem;
        // 左侧小喇叭
        /deep/ .van-notice-bar__left-icon {
          font-size: .20rem;
        }
        // 右侧叉号
        /deep/ .van-notice-bar__right-icon {
          font-size: .20rem;
        }
      }
      // 标签栏
      .coverage {
        height: 2.3rem;
        width: 3.5rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -1.75rem;
        // background-color: burlywood;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        // 立即邀请按钮
        button {
          height: .49rem;
          width: 1.75rem;
          font-size: .17rem;
          background-color: #e60012;
          color: #fdedef;
          border: 0;
          margin-bottom: 0.15rem;
        }
        // 整体标签栏
        /deep/ .van-tabs--line {
          width: 100%;
          height: 1.7rem;
          // 上边的切换tab栏
          /deep/ .van-tabs__wrap {
            border-radius: .10rem .10rem 0 0;
            height: .40rem;
            // 被选中的标签的样式
            /deep/ .van-tab--active {
              background-color: #fdd949;
            }
            // 切换栏
            /deep/ .van-tabs__nav {
              height: .40rem;
            }
            /deep/ .van-tab {
              height: .40rem;
              line-height: .40rem;
              font-size: .15rem;
            }
          }
          // 下方的切换内容
          /deep/ .van-tabs__content {
            width: 100%;
            height: 1.3rem;
            overflow: auto;
            font-size: .15rem;
            background-color: #f4f4f4;
            // 下方内容中的每一个
            .SFdiv {
              height: .49rem;
              width: 100%;
              line-height: .49rem;
              text-align: left;
              border-bottom: 0.01rem solid #fcfcfc;
              img {
                height: .30rem;
                width: .30rem;
                margin: 0 .10rem;
              }
            }
          }
        }
      }
    }
  }
</style>
